import React, { useState } from 'react';
import { Form, Button, Divider, DatePicker, Cascader, Input, Tag, Tooltip } from 'antd';
import { connect, Dispatch } from 'umi';
import { StateType } from '../../model';
import styles from './index.less';
import moment from 'moment';
import { PlusOutlined } from '@ant-design/icons';
const { TextArea } = Input;
const { RangePicker } = DatePicker;
const config = {
  rules: [{ type: 'object', required: true, message: '请输入来访时间!' }],
};
interface Step1Props {
  data?: StateType['step'];
  dispatch?: Dispatch;
}
interface ICancelReason {
  target: { value: string }
}
const Step1: React.FC<Step1Props> = (props) => {
  const { dispatch, data } = props;
  const [form] = Form.useForm();
  const [tags, setTags] = useState<Array<string>>([]);//车牌号
  const [inputVisible, setInputVisible] = useState(false);//车牌号添加的状态
  const [inputValue, setInputValue] = useState('');

  //添加车牌号
  const handleClose = (removedTag:String) => {
    const tag = tags.filter(tag => tag !== removedTag);
    setTags(tag);
  };
  const showInput = () => {
    setInputVisible(true);
  };
  const handleInputChange = (e:ICancelReason) => {
    setInputValue(e.target.value);
  };

  const handleInputConfirm = () => {
    if (inputValue && tags.indexOf(inputValue) === -1) {
      setTags([...tags, inputValue])
    }
    setInputVisible(false);
    setInputValue('')
  };

  if (!data) {
    return null;
  }
  const { validateFields } = form;
  const onValidateForm = async () => {
    const values = await validateFields();
    if (dispatch) {
      dispatch({
        type: 'initiateSubscribe/saveStepFormData',
        payload: {...values,licensePlate:[...tags]},
      });
      dispatch({
        type: 'initiateSubscribe/saveCurrentStep',
        payload: 'confirm',
      });
    }
  };
  const disabledDate = (current: Object) => {
    return current && current < moment().subtract(1, 'day')
  }
  return (
    <>
      <Form
        form={form}
        layout="vertical"
        className={styles.stepForm}
        hideRequiredMark
        initialValues={data}
      >
        <div>
          <div className={styles.visitor}>
            <Form.Item
              label="访客姓名"
              name="visitorName"
              rules={[{ required: true, message: '请输入访客姓名！' }]}
            >
              <Input placeholder="请输访客姓名"
              />
            </Form.Item>
            <Form.Item
              label="身份证号"
              name="visitorIdCard"
              rules={[{ required: true, message: '请输入访客身份证号码！' }]}
            >
              <Input placeholder="请输访客身份证号"
              />
            </Form.Item>
            <Form.Item
              label="手机号"
              name="visitorPhone"
              rules={[{ required: true, message: '请输入访客手机号！' }]}
            >
              <Input placeholder="请输访客手机号"
              />
            </Form.Item>
            <Form.Item
              label="所属公司"
              name="visitorCompany"
            >
              <Input placeholder="请输访客所属公司"
              />
            </Form.Item>
            <Form.Item
              name="timeQuantum"
              label="来访时间段"
              {...config}
              rules={[{ required: true, message: '请输入来访时间段' }]}
            >
              <RangePicker
                disabledDate={disabledDate}
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm"
              />
            </Form.Item>
            <Form.Item label="车牌号">
              {tags.map((tag, index) => {
                const isLongTag = tag.length > 20;

                const tagElem = (
                  <Tag
                    className="edit-tag"
                    key={tag}
                    closable={index !== 0}
                    onClose={() => handleClose(tag)}
                  >
                    <span
                      onDoubleClick={e => {
                        if (index !== 0) {
                          e.preventDefault();
                        }
                      }}
                    >
                      {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                    </span>
                  </Tag>
                );
                return isLongTag ? (
                  <Tooltip title={tag} key={tag}>
                    {tagElem}
                  </Tooltip>
                ) : (
                    tagElem
                  );
              })}
              {inputVisible && (
                <Input
                  type="text"
                  size="small"
                  className="tag-input"
                  value={inputValue}
                  onChange={(e) => { handleInputChange(e) }}
                  onBlur={handleInputConfirm}
                  onPressEnter={handleInputConfirm}
                />
              )}
              {!inputVisible && (
                <Tag className="site-tag-plus" onClick={showInput} style={{width:tags.length>0?'':'100%'}}>
                  <PlusOutlined />点击添加车牌号
                </Tag>
              )}
            </Form.Item>
          </div>
          <div>
            <Form.Item name="visitorReason" label="访问事由"
            >
              <TextArea rows={4} />
            </Form.Item>
          </div>
        </div>
        <div className={styles.respondents}>
          <Form.Item
            label="受访人姓名"
            name="intervieweeName"
            rules={[{ required: true, message: '请输入受访人姓名！' }]}
          >
            <Input placeholder="请输受访人姓名"
            />
          </Form.Item>
          <Form.Item label="公司部门"
            name="company"
          >
            <Cascader
              options={[
                {
                  value: 'zhejiang',
                  label: 'Zhejiang',
                  children: [
                    {
                      value: 'hangzhou',
                      label: 'Hangzhou',
                    },
                  ],
                },
              ]}
            />
          </Form.Item>
          <Form.Item
            label="手机号"
            name="intervieweePhone"
            rules={[{ required: true, message: '请输入受访人手机号！' }]}
          >
            <Input placeholder="请输受访人手机号"
            />
          </Form.Item>
        </div>
      </Form>
      <Button type="primary" className={styles.step}
        onClick={onValidateForm}>
        下一步
          </Button>
      <Divider style={{ margin: '55px 0 24px' }} />
    </>
  );
};
export default connect(({ initiateSubscribe }: { initiateSubscribe: StateType }) => ({
  data: initiateSubscribe.step,
}))(Step1);
